<template>
    <view class="featured clearfix">
        <view class="title">
            <text class="h1">玩法推荐</text><text class="desc">其他用户分享推荐</text>
        </view>
        <view class="line"></view>
        <view class="content-item" @click="navto(item.id)" v-for="(item,index) in List" :key="index">
            <view class="info clearfix">
                <image class="img" :src="item.priImg" mode="aspectFit"></image>
                <text class="name">{{item.name}}</text>
                <text class="date">{{item.date}}</text>
            </view>
            <view class="content clearfix">
                <view class="imgs clearfix">
                    <image v-for="(img,i) in item.images" :key="i" :src="img" mode="aspectFit"></image>
                </view>
                <view class="con-title">
                    {{item.desc}}
                </view>
                <view class="addr">
                    {{item.addr}}
                    <image class="icon" src="/static/images/index/dingwei.png" mode="aspectFit"></image>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default{
        data(){
            return{
                List:[
                    {
                        id:"1",
                        priImg:"https://tva1.sinaimg.cn/crop.0.0.664.664.50/006wwWLWjw8f5q8q2qp2oj30ig0igdgt.jpg?KID=imgbed,tva&Expires=1592570888&ssig=DF4mKk1bTf",
                        name:"煜华姐",
                        date:"2020-05-11",
                        images:[
                            "/static/images/index/006wwWLWly1gfs9tx1bspj33k02o04qs.jpg",
                            "/static/images/index/006wwWLWly1gfs9u38rqjj33k02o0e85.jpg",
                            "/static/images/index/006wwWLWly1gfs9u6vp51j33k02o01l1.jpg"
                        ],
                        desc:"登山探幽、漂流赏水，甚至只是漫步江边，都让人不忍离去。而点缀其中的古村落中，旧时的书院、宗祠比比皆是，颇有韵味。尤其是春夏之交，溪流和田园如梦似幻。",
                        addr:"湖州-楠溪江"
                    },
                    {
                        id:"2",
                        priImg:"http://photo02-zj.tourzj.com/2015/11/22/05274619a25f7b79464587c37fd64167420a81.jpg!100X100",
                        name:"小菜",
                        date:"2020-05-20",
                        images:[
                            "http://play01-zj.tourzj.com/2015/12/13/19271758345e281fcf7e909a2b2ccaf2fe9c23.jpg!300X225",
                            "http://play01-zj.tourzj.com/2015/12/13/1927151bc30aca275a3a7345bfc9f0d4c5452c.jpg!300X225",
                            "http://play01-zj.tourzj.com/2015/12/13/1927160883b0bc73bffac3cf288bf2c78e1d02.jpg!300X225"
                        ],
                        desc:"韩美林大师在滨江的闻涛路上有一作品是钱王射潮，夏日花园就在这个广场的边上。一边，它连接着钱塘江，一边则是安安静静的内湖旁。坐在里面，一边看江，一边赏湖，人又在公园之中。我想这应该便足够了。去那里喝咖啡的人们，总是会抱怨这里的东西有多么地不好吃。但是，莫名地，只要来到滨江，总会想起这个地方。要不，还是去夏日花园吧？！对的，这就是夏日花园的魅力，即便东西再一般，你也放不下那里的风景。好吧，如果选一个夏日的晚上，坐在咖啡馆的天台上，开上两瓶红酒，还没喝便会醉了。还有那些善于雅俗共享的人们，一边喝着红酒，一边却叫了小龙虾的外卖。如此场景，醉了",
                        addr:"杭州 - 滨江钱龙射潮"
                    },
                ]
            }
        },
        methods:{
            navto(id){
                uni.navigateTo({
                    url: "/pages/detail/PlayDetail"
                });
            }
        }
    }
</script>

<style>
    .line{
        height: 1px;
        background-color: #efefef;
        margin-bottom: 20px;
    }
    .featured{
        margin: 10px 10px;
    }
    .title{
        margin: 20px 0;
    }
    .h1{
        border-left: 5px solid #007AFF;
        font-size: 15px;
        padding: 0 10px;
    }
    .desc{
        margin-left: 10px;
        font-size: 12px;
        color: #ccc3c6;
    }
    .clearfix:after{
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
    .clearfix{
        *zoom: 1;
    }
    .img{
        margin-left: 5px;
        width: 2.0rem;
        height: 2.0rem;
        border-radius: 50%;
        float: left;
    }
    .name{
        margin-left: 10px;
        float: left;
        line-height: 2.0rem;
        font-size: 13px;
    }
    .date{
        float: right;
        line-height: 2.0rem;
        margin-right: 20px;
        font-size: 12px;
        color: #ccc3c6;
    }
    .imgs{
        margin: 5px 0 0 5px;
    }
    .imgs image{
        float: left;
        width: 31%;
        height: 100px;
        margin-right: 2%;
    }
    .con-title{
        margin-left: 5px;
        font-size: 12px;
        color: #848484;
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
    .addr{
        float: right;
        font-size: 10px;
        color: #848484;
    }
    .icon{
        padding-top: 5px;
        width: 18px;
        height: 18px;
    }
    .content-item{
        padding-bottom: 20px;
        margin-bottom: 20px;
        border-bottom: 1px solid #efefef;
    }
</style>
